<!-- 备注：show是打开新增和修改模态框。show2是打开存储容器模态框。show3是打开冻存架模态框。show4是打开存冻盒规格模态框。 -->
<template>
    <div class="whole_top">
        <el-row :gutter="10">
            <el-col :span="18">
                <el-input v-model="pageParams.key" style="width: 240px" placeholder="参数名" clearable />
                <el-button style="margin-left: 20px;" @click="search">查询</el-button>
                <el-button type="success" @click="show">新增</el-button>
                <el-button type="danger" :disabled="selectedRows.length == 0" @click="batchDel">批量删除</el-button>
            </el-col>
        </el-row>
    </div>
    <div class="table-container">
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%;
             min-width: 1200px;
              height:500px" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" />
            <el-table-column property="code" label="编码" />
            <el-table-column property="equipmentName" label="容器" />
            <el-table-column property="shelfName" label="存冻架" />
            <el-table-column property="boxTypeName" label="存冻盒规则" />
            <el-table-column property="rowNo" label="第X行" />
            <el-table-column property="columnNo" label="第Y列" />
            <el-table-column property="barcode" label="条形码" />
            <el-table-column property="barcode2" label="二维码" />
            <el-table-column property="hardwareOde" label="硬件编码" />
            <el-table-column property="rowNums" label="行数" />
            <el-table-column property="columnNums" label="列数" />
            <el-table-column property="createOn" label="创建时间" />
            <el-table-column property="modifiedOn" label="修改时间" />
            <el-table-column property="remark" label="备注" />
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="scope">
                    <el-button @click="amend(scope.row)">修改</el-button>
                    <el-button @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
        :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        style="margin-top: 20px;" />
    <!-- 新增和修改模态框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="55%">
        <div style="display: flex; justify-content: center;">
            <el-form ref="ruleFormRef" style="width: 100%; max-width: 900px;" :model="ruleForm" :rules="rules"
                label-width="100px">
                <!-- 第一行：编码信息 -->
                <div style="display: flex; justify-content: space-between; padding: 12px 0;">
                    <!-- 这里的prop必须要加，不同于表格，表单的prop用于表单验证-->
                    <el-form-item label="编码" style="width: 48%;" prop="code">
                        <el-input v-model="ruleForm.code" placeholder="编码不可重复" />
                    </el-form-item>
                    <el-form-item label="条形码" style="width: 48%;" prop="barcode">
                        <el-input v-model="ruleForm.barcode" placeholder="条形码" />
                    </el-form-item>
                </div>
                <!-- 第二行：二维码和硬件编码 -->
                <div
                    style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <el-form-item label="二维码" style="width: 48%;" prop="barcode2">
                        <el-input v-model="ruleForm.barcode2" placeholder="二维码" />
                    </el-form-item>
                    <el-form-item label="硬件编码" style="width: 48%;" prop="hardwareOde">
                        <el-input v-model="ruleForm.hardwareOde" placeholder="硬件Code" />
                    </el-form-item>
                </div>
                <!-- 第三行：容器选择 -->
                <div
                    style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <el-form-item label="存储容器" style="width: 48%;" prop="equipmentName">
                        <el-input v-model="ruleForm.equipmentName" placeholder="存储容器">
                            <template #append>
                                <el-button :icon="Search" @click="show2" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="冻存架" style="width: 48%;" prop="shelfName">
                        <el-input v-model="ruleForm.shelfName" placeholder="冻存架">
                            <template #append>
                                <el-button :icon="Search" @click="show3" />
                            </template>
                        </el-input>
                    </el-form-item>
                </div>
                <!-- 第四行：行列位置 -->
                <div
                    style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <el-form-item label="第X行" style="width: 48%;" prop="rowNo">
                        <el-input-number v-model="ruleForm.rowNo" placeholder="行号" style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="第Y列" style="width: 48%;" prop="columnNo">
                        <el-input-number v-model="ruleForm.columnNo" placeholder="列号" style="width: 100%" />
                    </el-form-item>
                </div>
                <!-- 第五行：规格信息 -->
                <div
                    style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <el-form-item label="存冻盒规格" style="width: 48%;" prop="boxTypeName">
                        <el-input v-model="ruleForm.boxTypeName" placeholder="存冻盒规则">
                            <template #append>
                                <el-button :icon="Search" @click="show4" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="行数" style="width: 48%;" prop="rowNums">
                        <el-input v-model="ruleForm.rowNums" placeholder="行数" />
                    </el-form-item>
                </div>
                <!-- 第六行：列数 -->
                <div style="padding: 12px 0; border-bottom: 1px solid #f0f0f0;">
                    <el-form-item label="列数" style="width: 48%;" prop="columnNums">
                        <el-input v-model="ruleForm.columnNums" placeholder="列数" />
                    </el-form-item>
                </div>
                <!-- 备注 -->
                <div style="padding: 12px 0;">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea" rows="3" />
                    </el-form-item>
                </div>
                <!-- 操作按钮 -->
                <el-form-item style="text-align: right; margin-top: 20px;">
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
    <!-- 存储容器模态框 -->
    <el-dialog v-model="dialogVisible2" :title="title2" width="55%">
        <el-row :gutter="10">
            <el-col :span="10">
                <div style="display: flex; gap: 10px">
                    <el-input placeholder="参数名" clearable v-model="pageParams2.key" />
                    <el-button style="margin-left: 20px;" @click="search2">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData2" row-key="id" style="width: 100%;" border>
            <el-table-column property="code" label="设备编码" />
            <el-table-column property="name" label="设备名称" />
            <el-table-column property="equipmentModelName" label="型号名称" />
            <el-table-column property="equipmentGroupName" label="组名称" />
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="scope">
                    <el-button @click="select1(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageParams2.page" v-model:page-size="pageParams2.limit"
            :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
            style="margin-top: 20px;" />
    </el-dialog>

    <!-- 存冻架模态框 -->
    <el-dialog v-model="dialogVisible3" :title="title3" width="55%">
        <el-row :gutter="10">
            <el-col :span="10">
                <div style="display: flex; gap: 10px">
                    <el-input placeholder="参数名" clearable v-model="pageParam3.key" />
                    <el-button style="margin-left: 20px;" @click="search3">查询</el-button>
                </div>
            </el-col>
        </el-row>

        <el-table :data="tableData3" row-key="id" style="width: 100%;" border>
            <el-table-column property="code" label="编码" />
            <el-table-column property="name" label="规格" />
            <el-table-column property="equipmentName" label="容器名称" />
            <el-table-column property="rowNo" label="第X行" />
            <el-table-column property="columnNo" label="第Y列" />
            <el-table-column property="rowNums" label="行数" />
            <el-table-column property="columnNums" label="列数" />
            <el-table-column property="barcode" label="条形码" />
            <el-table-column property="barcode2" label="条形码2" />
            <el-table-column property="hardwareOde" label="硬件编码" />
            <el-table-column property="modifiedOn" label="修改时间" />
            <el-table-column property="remark" label="备注" />
            <el-table-column label="选择" fixed="right" width="100">
                <template #default="scope">
                    <el-button @click="select2(scope.row)" style="color: green;">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageParam3.page" v-model:page-size="pageParam3.limit"
            :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total3" @size-change="handleSizeChange3" @current-change="handleCurrentChange3"
            style="margin-top: 20px;" />
    </el-dialog>

    <!-- 冻存盒规格模态框 -->
    <el-dialog v-model="dialogVisible4" :title="title4" width="55%">
        <el-row :gutter="10">
            <el-col :span="10">
                <div style="display: flex; gap: 10px">
                    <el-input placeholder="参数名" clearable v-model="pageParam4.key" />
                    <el-button style="margin-left: 20px;" @click="search4">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData4" row-key="id" style="width: 100%;" border>
            <el-table-column type="selection" />
            <el-table-column property="name" label="名称" />
            <el-table-column property="encodingType" label="位置编码">
                <template #default="scope">
                    <span v-if="scope.row.encodingType == 1">纯数字</span>
                    <span v-else-if="scope.row.encodingType == 2">混合</span>
                </template>
            </el-table-column>
            <el-table-column property="rowNums" label="行数" />
            <el-table-column property="columnNums" label="列数" />
            <el-table-column property="width" label="宽度" />
            <el-table-column property="height" label="高度" />
            <el-table-column property="remark" label="备注" />
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="scope">
                    <el-button @click="select3(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageParam4.page" v-model:page-size="pageParam4.limit"
            :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total4" @size-change="handleSizeChange4" @current-change="handleCurrentChange4"
            style="margin-top: 20px;" />
    </el-dialog>


</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
// 跳转
import { useRouter } from 'vue-router'
const router = useRouter()
import { add, edit, equipmentList, forzenboxtype, info, list, remove, shelfList} from '@/api/forzenbox';
import { ElMessage, ElMessageBox, FormInstance, FormRules, } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const tableData: any = ref([]); // 用来放置渲染表格内容的数据
const pageParams = reactive({   // 用来存储当渲染表格时，需要向后端发送的数据
    page: 1,    // 当前页码
    limit: 10,  // 每页显示条数
    key: "",     //筛选数据
});
const total = ref(0); // 数据总条数

// 表格内容渲染函数
function getList() {
    list(pageParams).then(res => {
        console.log("表格内容渲染列表", res);
        tableData.value = res.page.list;
        total.value = res.page.totalCount;
    });
};
onMounted(() => {
    getList();//表格内容初始渲染
});

/* 以下是分页处理逻辑 */
// 每页条数变化时触发
const handleSizeChange = (val: number) => {
    pageParams.limit = val;
    pageParams.page = 1; // 条数变化时重置到第一页
    getList();
};

// 当前页码变化时触发
const handleCurrentChange = (val: number) => {
    pageParams.page = val;
    getList();
};

//搜索
function search() {
    pageParams.page = 1;
    getList();
}

/* 以下是新增和修改模态框逻辑 */
const dialogVisible = ref(false); //用作控制模态框的开关
let title = ref('');// 模态框的题目
// 打开新增弹框
function show() {
    dialogVisible.value = true;
    title.value = "新增";
    // 重置校验
    nextTick(() => {
        (ruleFormRef.value as FormInstance).resetFields();
    });
};

// 定义ruleForm的类型
interface ruleForm {
  code: string;
  barcode: string;
  barcode2: string;
  hardwareOde: string;
  equipmentName: string;
  equipmentId: string;
  shelfName: string;
  shelfId: string;
  rowNo: number;
  columnNo: number;
  boxTypeName: string;
  boxTypeId: string;
  rowNums: string;
  columnNums: string;
  remark: string;
  sampleTypes: string;
}
// 表单验证规则
const rules = reactive<FormRules<typeof ruleForm>>({
  code: [
    { required: true, message: '编码不能为空', trigger: ['blur', 'change'] },
  ],
  equipmentName: [
    { required: true, message: '请选择存储容器', trigger: ['blur', 'change'] }
  ],
  shelfName: [
    { required: true, message: '请选择冻存架', trigger: ['blur', 'change'] }
  ],
  rowNo: [
    { 
      required: true, 
      message: '第X行不能为空', 
      trigger: ['blur', 'change'] 
    },
    {
      type: 'number',
      min: 1,
      message: '行号必须大于0',
      trigger: ['blur', 'change']
    }
  ],
  columnNo: [
    { 
      required: true, 
      message: '第Y列不能为空', 
      trigger: ['blur', 'change'] 
    },
    {
      type: 'number',
      min: 1,
      message: '列号必须大于0',
      trigger: ['blur', 'change']
    }
  ],
  boxTypeName: [
    { required: true, message: '请选择存冻盒规格', trigger: ['blur', 'change'] }
  ],
  rowNums: [
    { 
      required: true, 
      message: '行数不能为空', 
      trigger: ['blur', 'change'] 
    },
    {
      type: 'number',
      min: 1,
      message: '行数必须大于0',
      trigger: ['blur', 'change']
    }
  ],
  columnNums: [
    { 
      required: true, 
      message: '列数不能为空', 
      trigger: ['blur', 'change'] 
    },
    {
      type: 'number',
      min: 1,
      message: '列数必须大于0',
      trigger: ['blur', 'change']
    }
  ]
});
const ruleFormRef = ref<FormInstance>();
//新增和修改模态框数据
const ruleForm = reactive({
  // 基础信息
  code: "",          // 冻存盒编码
  barcode: "",       // 条形码
  barcode2: "",      // 二维码
  hardwareOde: "",   // 硬件编码

  // 关联ID（实际存储值）
  equipmentId: "",   // 存储容器ID（如 352）
  shelfId: "",       // 存冻架ID
  boxTypeId: "",     // 存冻盒规格ID

  // 位置信息
  rowNo: 1,          // 第X行
  columnNo: 1,       // 第Y列

  // 规格信息
  rowNums: "",       // 行数
  columnNums: "",    // 列数
  boxTypeName: "",   // 存冻盒规格名称
  // 前端显示字段（可选）
  equipmentName: "", // 存储容器名称（显示用）
  shelfName: "",     // 存冻架名称

  // 其他
  remark: "",        // 备注
  sampleTypes: "",   // 样本类型
});
// 点击修改按钮触打开模态框，进行修改
const amend = async (row) => {
    dialogVisible.value = true;
    title.value = "修改";

    try {
        const id = row.id;
        const res = await info(id); //调用修改内容接口，渲染修改内容
         console.log("修改模态框渲染数据",res)
           // 清空表单
        Object.keys(ruleForm).forEach(key => ruleForm[key] = '')
       // 填充基本表单数据
        Object.assign(ruleForm, {
           code: res.forzenBox.code || '',
            barcode: res.forzenBox.barcode || '',
            barcode2: res.forzenBox.barcode2 || '',
            hardwareOde: res.forzenBox.hardwareOde || '',
            equipmentName: res.forzenBox.equipmentName || '',
            equipmentId: res.forzenBox.equipmentId || '',
            shelfName: res.forzenBox.shelfName || '',
            shelfId: res.forzenBox.shelfId || '',
            rowNo: res.forzenBox.rowNo || 1,
            columnNo: res.forzenBox.columnNo || 1,
            boxTypeName: res.forzenBox.boxTypeName || '',
            boxTypeId: res.forzenBox.boxTypeId || '', 
            rowNums: res.forzenBox.rowNums || '',
            columnNums: res.forzenBox.columnNums || '',
            remark: res.forzenBox.remark || '',
            sampleTypes: res.forzenBox.sampleTypes || '', 
    //保留id用于提交
    id: res.forzenBox.id,
        });
    } catch {
        ElMessage.error('获取修改详情失败');
        dialogVisible.value = false;
    }
};
// 点击新增或修改模态框确定后触发
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (title.value === "新增") {
                // 新增接口
                add(ruleForm).then(res => {
                    console.log("新增成功",res)
                    ElMessage({
                        message: '新增成功',
                        type: 'success',
                    });
                    dialogVisible.value = false;
                    getList();
                })
                    .catch(err => {
                        if (err.code === 188) {
                            ElMessage.error('用户名已存在')
                        }
                    });
            } else {
                // 修改
                edit({
                    id: ruleForm.id,
                    ...ruleForm
                }).then(() => {
                    ElMessage.success("修改成功");
                    dialogVisible.value = false;
                    getList();
                });

            }
        } else {
            console.log('error submit!', fields);
        }
    });
};
//点击模态框取消时触发
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    dialogVisible.value = false;
};



/* 以下是选择容器模态框以及内部搜索栏和表格逻辑 */
// 选择容器表格内容渲染函数
function getList2() {
    equipmentList(pageParams2).then(res => {
        console.log("选择容器表格内容渲染列表", res);
        tableData2.value = res.page.list;
        total2.value = res.page.totalCount;
    });
};
//打开存储容器模态框
function show2() {
    dialogVisible2.value = true;
    title2.value = "选择容器";
    getList2()
    // 重置校验
    nextTick(() => {
        (ruleFormRef.value as FormInstance).resetFields();
    });
};
//搜索
function search2() {
    pageParams2.page = 1;
    getList2();
}
const tableData2: any = ref([]); // 用来放置渲染表格内容的数据
const pageParams2 = reactive({   // 用来存储当渲染表格时，需要向后端发送的数据
    page: 1,    // 当前页码
    limit: 10,  // 每页显示条数
    key:""
});
const total2 = ref(0); // 数据总条数

const dialogVisible2 = ref(false); //用作控制模态框的开关
let title2 = ref('');// 模态框的题目
const handleSizeChange2 = (val: number) => {
    pageParams2.page = val;
    pageParams2.limit = 1; // 条数变化时重置到第一页
    getList();
};

// 当前页码变化时触发
const handleCurrentChange2 = (val: number) => {
    pageParams2.page = val;
    getList();
};
// 选择存储容器方法
const select1 = (row: any) => {
    ruleForm.equipmentName = row.name; // 容器名称
    ruleForm.equipmentId = row.id;     // 容器ID
    // 清空已选择的存冻架信息
    ruleForm.shelfName = '';
    ruleForm.shelfId = '';
    // 关闭选择模态框
    dialogVisible2.value = false;
};



/* 以下是选择冻存架模态框以及内部搜索栏和表格逻辑 */
// 选择容器表格内容渲染函数
function getList3() {
    shelfList(pageParam3).then(res => {
        console.log("选择存冻架表格内容渲染列表", res);
        tableData3.value = res.page.list;
        total3.value = res.page.totalCount;
    });
};

// 打开存冻架模态框
function show3() {
    if (!ruleForm.equipmentId) { 
        ElMessage.warning('请先选择容器');
        return;
    }
    
    dialogVisible3.value = true;
    title3.value = "选择存冻架";
    pageParam3.equipmentId = ruleForm.equipmentId;
    getList3();
};

const tableData3: any = ref([]); 
const pageParam3 = reactive({   
    page: 1,    
    limit: 10,  
    key:"",    
    equipmentId: "" ,
});
const total3 = ref(0); 
const dialogVisible3 = ref(false); 
let title3 = ref('');

// 每页条数变化时触发
const handleSizeChange3 = (val: number) => {
    pageParam3.page = 1; // 重置到第一页
    pageParam3.limit = val; // 设置新的每页条数
    getList3(); // 调用冻存架数据获取函数
};

// 当前页码变化时触发
const handleCurrentChange3 = (val: number) => {
    pageParam3.page = val;
    getList3(); // 调用冻存架数据获取函数
};

// 搜索
function search3() {
    pageParam3.page = 1; // 重置到第一页
    getList3(); // 调用冻存架数据获取函数
};

// 选择冻存架方法
const select2 = (row: any) => {
    console.log("dsdsadsa",row)
    ruleForm.shelfName = row.code; // 前端显示内容
    ruleForm.shelfId = row.id; 
    dialogVisible3.value = false;
};




/* 以下是选择冻存盒规格模态框以及内部搜索栏和表格逻辑 */
// 选择容器表格内容渲染函数
function getList4() {
     forzenboxtype(pageParam4).then(res => {
        console.log("选择选择冻存盒规格表格内容渲染列表", res);
        tableData4.value = res.page.list;
        total4.value = res.page.totalCount;
    });
};
//打开冻存盒规格模态框
function show4() {
    dialogVisible4.value = true;
    title4.value = "选择冻存盒规格";
    getList4();
};
const tableData4: any = ref([]); // 用来放置渲染表格内容的数据
const pageParam4 = reactive({   // 用来存储当渲染表格时，需要向后端发送的数据
    page: 1,    // 当前页码
    limit: 10,  // 每页显示条数
    key:"",    //筛选数据
    equipmentId: "" // 容器ID参数
});
const total4 = ref(0); // 数据总条数
const dialogVisible4 = ref(false); //用作控制模态框的开关
let title4 = ref('');// 模态框的题目
const handleSizeChange4 = (val: number) => {
    pageParam4.page = val;
    pageParam4.limit = 1; // 条数变化时重置到第一页
    getList4();
};
// 当前页码变化时触发
const handleCurrentChange4 = (val: number) => {
    pageParam4.page = val;
    getList4();
};
// 搜索
function search4() {
    pageParam4.page = 1; // 重置到第一页
    getList4(); // 调用冻存架数据获取函数
};
// 选择冻存盒规格方法
const select3 = (row: any) => {
    //console.log("我留奥义",row)
    ruleForm.boxTypeName = row.name; 
    ruleForm.boxTypeNameId = row.id; 
    ruleForm.rowNums = row.rowNums; 
    ruleForm.columnNums = row.columnNums; 

    // 关闭选择模态框
    dialogVisible4.value = false;
};



/* 以下是删除逻辑 */
const multipleTableRef = ref();  // 用于表格引用
const selectedRows = ref([]);//用于存储表格被选择行的数据
// 获取表格选中行内容用于删除
const handleSelectionChange = (val) => {
    //console.log("表格被选行的内容", val);
    selectedRows.value = val;
};
// 单个删除
const del = (row: any) => {
    ElMessageBox.confirm(`确定要删除【${row.code}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        remove([row.id]).then(() => {
            ElMessage.success('删除成功');
            getList();
        }).catch(() => {
            ElMessage.error('删除失败');
        });
    }).catch(() => {
        // 用户点击了取消
    });
};
// 批量删除
const batchDel = () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请至少选择一条数据');
        return;
    }

    ElMessageBox.confirm(`确定要删除选中的${selectedRows.value.length}条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const ids = selectedRows.value.map(item => item.id);
        remove(ids).then(() => {
            ElMessage.success('批量删除成功');
            getList();
            // 清空选中状态
            multipleTableRef.value?.clearSelection();
        }).catch(() => {
            ElMessage.error('批量删除失败');
        });
    }).catch(() => {
        // 用户点击了取消
    });
};

</script>

<style scoped>
.whole_top {
    margin: 0 auto;
    width: 100%;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}
</style>